<!--TODO 如果表格中无数据则使用element ui中的空状态 el-empty-->
<template>
  <div class="role-body">
    <!--角色编辑-->
    <div class="role-button">
      <el-button size="small" type="success" @click="add">添加</el-button>
      <el-button size="small" type="danger" @click="delBatch">批量删除</el-button>
    </div>
    <el-table
        :data="roleData.records"
        stripe
        style="width: 100%"
        :border="true"
        @selection-change="handleSelectionChange"
        ref="multipleTable">
      <el-table-column type="selection"/>
      <el-table-column
          type="index"
          label="序号"
          width="81px">
        <template slot-scope="scope">
          {{ (roleData.current - 1) * roleData.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
          prop="roleName"
          label="角色名">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0">未启用</span>
          <span v-else-if="scope.row.status === 1">已启用</span>
          <span v-else>错误状态</span>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          fixed="right"
          width="235px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 1" size="mini" type="primary" @click="bindingMenus(scope.row.id)">关联菜单
          </el-button>
          <el-button v-if="scope.row.status === 1" size="mini" type="primary" @click="update(scope.row.id)">编辑
          </el-button>
          <el-button v-if="scope.row.status === 1" size="mini" type="danger" @click="logicDel(scope.row.id)">删除
          </el-button>
          <el-button v-if="scope.row.status === 0" size="mini" type="warning" @click="recover(scope.row.id)">恢复
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-count="roleData.pages"
        :current-page.sync="query.current"
        class="pagination"
        @current-change="getRoleData">
    </el-pagination>
    <!--添加或修改的弹框-->
    <el-dialog
        width="500px"
        :title="editDialog.title"
        :visible.sync="editDialog.show">
      <component
          v-if="editDialog.show"
          :is="editDialog.component"
          :editDialogShow.sync="editDialog.show"
          :id="editDialog.id"
          :bankId="query.bankId"
          @getRoleData="getRoleData">
      </component>
    </el-dialog>
    <!--关联角色弹框-->
    <el-dialog
        width="500px"
        title="关联角色"
        :visible.sync="bindingMenusDialog.show">
      <component
          v-if="bindingMenusDialog.show"
          :is="bindingMenusDialog.component"
          :bindingMenusDialogShow.sync="bindingMenusDialog.show"
          :id="bindingMenusDialog.id"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import {get, put, del} from '@/plugins/axios'

export default {
  name: "role",
  created() {
    this.getRoleData()
  },
  data() {
    const module = '/role'
    return {
      roleData: {},
      query: {
        current: 1,
        size: 10,
        bankId: 0
      },
      uri: {
        list: module + '/page',
        del: module + '/batchDelete',
        update: module + '/update'
      },
      editDialog: {
        title: '',
        show: false,
        id: null,
        component: () => import('@/views/main/role/edit')
      },
      bindingMenusDialog: {
        show: false,
        id: null,
        component: () => import('@/views/main/role/bindingMenus')
      },
      multipleSelection: []
    }
  },
  methods: {
    getRoleData() {
      get(this.uri.list, this.query, response => {
        if (response.code === 200) {
          this.roleData = response.data
        }
      })
    },
    add() {
      this.editDialog.title = '添加';
      this.editDialog.show = true;
      this.editDialog.id = null;
    },
    update(id) {
      this.editDialog.title = '编辑';
      this.editDialog.show = true;
      this.editDialog.id = id;
    },
    logicDel(idList) {
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(this.uri.del, {idList: idList}, response => {
          if (response.code === 200) {
            this.getRoleData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '删除已取消' : error
        });
      })
    },
    delBatch() {
      const idList = [];
      for (const id in this.multipleSelection) {
        idList.push(this.multipleSelection[id].id)
      }
      this.logicDel(idList)
    },
    recover(id) {
      this.$confirm('是否恢复该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        put(this.uri.update, {id: id, status: 1}, response => {
          if (response.code === 200) {
            this.getRoleData()
            this.$message({
              type: 'success',
              message: '恢复成功!'
            })
          }
        })
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '恢复已取消' : error
        });
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    bindingMenus(id) {
      this.bindingMenusDialog.show = true
      this.bindingMenusDialog.id = id
    }
  }
}
</script>

<style scoped lang="less">
.role-body {
  padding: 5px 10px 20px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background: white;

  .role-button {
    margin: 5px 0 5px 5px;

    .filter {
      width: auto;
      margin-left: 10px;
    }

    .search-button {
      margin-left: 10px;
    }
  }

  .pagination {
    margin-top: 8px;
  }
}
</style>